import React, { useRef, useState } from 'react';
import { Table, Button, Space } from 'dw-mx';
import { UploadOutlined } from 'dw-mx-icons'
import { DateCell, StringCell } from "dw-mx-table";
import { request } from 'dw-mx-request';
import { Dialog } from 'dw-mx-extend'
import upload from './upload'

const { Column } = Table;

export default function UploadTable() {
    const dialogRef = useRef<Dialog>();
    const [data, setData] = useState([]);
    const download = async function () {
        await request.download('/sef1/mx/test/tabledownload', {
            data: downloadData,
            fileName: '表格测试.xlsx'
        })
    }
    const updata = async function () {
        const result = await dialogRef.current.openDialog(upload, {
            title: '上传表格',
            props: {
                target: "sef1"
            }
        })
        const ret = await JSON.parse(result);
        ret.splice(0, 1);
        await setData(ret);
    }
    const downloadData = [
        {
            key: '1',
            name: '张三',
            sex: "男",
            age: "32",
            date: "19010102",
            nationality: "中国"
        }
    ];
    return <>
        <Table scroll={{ x: 800 }} dataSource={data} bordered>
            <Column ellipsis={true} title="姓名" dataIndex="name" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="性别" dataIndex="sex" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="年龄" dataIndex="age" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="国籍" dataIndex="nationality" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="出生日期" dataIndex="date" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <DateCell value={value} mask={"YYYY/MM/DD HH:mm:ss"} sourceMask={"YYYYMMDD"} />
                }}
            />

        </Table>
        <Button onClick={updata}>上传表格</Button>
        <Table scroll={{ x: 800 }} dataSource={downloadData} bordered>
            <Column ellipsis={true} title="姓名" dataIndex="name" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="性别" dataIndex="sex" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="年龄" dataIndex="age" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="国籍" dataIndex="nationality" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <StringCell value={value} />
                }}
            />
            <Column ellipsis={true} title="出生日期" dataIndex="date" key="no" align={'center'} width={40}
                render={(value, record, index) => {
                    return <DateCell value={value} mask={"YYYY/MM/DD"} sourceMask={"YYYYMMDD"} />
                }}
            />

        </Table>
        <Button onClick={download} >下载表格</Button>
        <Dialog ref={dialogRef}></Dialog>
    </>
}